<template>
    <div>
        <div class="Topstory-container flex">

            <div class="Topstory-mainColumn">
                <div class=" flex align-center">
                    <el-input placeholder="请输入你的关键字" prefix-icon="el-icon-search" v-model="KeyWord">
                    </el-input>
                    <el-button class="margin-left-xs" mini type="primary" icon="el-icon-search" @click="SearchTopic()">搜
                        索</el-button>
                </div>
                <div class="Topstory-content margin-top-xs bg-white">
                    <el-pagination-box ref="PaginationBox" :where="where" url="/Topic/List">
                        <template v-slot:content="{ data }">

                            <div class="list Card">
                                <div class="TopstoryItem" v-for="(item, index) in data " :key="item.Id"
                                    @click="TopicClick(item)">
                                    <h2 class="ContentItem-title">{{ item.Title }}</h2>
                                    <div class="margin-top-xs AuthorInfo" v-if="item.CreatorAppUserDto">
                                        <img class="AuthorInfo-avatar"
                                            :src="item.CreatorAppUserDto.ImageUrls | ReplaceImageHttpFilter">
                                        <div class="margin-left-xs AuthorInfo-name ">{{ item.CreatorAppUserDto.Name
                                            }}</div>
                                        <div class="margin-left-xs flex-sub AuthorInfo-badgeText">{{
                                            item.CreatorAppUserDto.Introduce }}
                                        </div>
                                    </div>
                                    <div class="flex align-center ">

                                        <div style="width:100% font-size: 18px;letter-spacing: 1px;color:gray;margin-top:12px"
                                            class="content-cut flex-sub">{{
                                                item.Content | RepalceHtml }}</div>
                                        <el-image v-if="item.Cover"
                                            style="width: 70px; height: 70px;border-radius: 5px;margin-right:10px;"
                                            :src="item.Cover | ReplaceImageHttpFilter" fit="fit"></el-image>

                                    </div>
                                    <div div class=" ContentItem-time">发布于:{{ item.CreationTime }}
                                    </div>
                                    <div class="flex margin-top-xs align-center">
                                        <el-button type="primary" size="mini">{{ item.ViewCount }} 次浏览</el-button>
                                        <div class="margin-left-xs text-gray">{{ item.CommentDtos.length }}<span
                                                class="margin-left-xs">条评论</span></div>

                                    </div>
                                </div>
                            </div>
                        </template>
                    </el-pagination-box>

                </div>
            </div>
            <div class="side">

                <RecommendAuthorListCard></RecommendAuthorListCard>

            </div>

        </div>

    </div>
</template>

<script>
import RecommendAuthorListCard from "@/views/Components/RecommendAuthorListCard.vue"

import router from '@/router';
import { mapGetters } from 'vuex'
export default {
    components: { RecommendAuthorListCard },
    name: 'TopicSearch',
    computed: {
        ...mapGetters([
            'name', 'roleTypeFormat', 'avatar', 'loginTimePeriod', "user"
        ])
    },

    data() {
        return {
            active: 1,
            where: {
                AuditStatus: 1,
            },
            KeyWord: '',
            TopicList: [],
            TopicTypeList: []

        };
    },
    watch: { // 监听，当路由发生变化的时候执行
        $route(to, from) {
            if (to.query.KeyWord != from.query.KeyWord) {
                this.where.KeyWord = to.query.KeyWord;
                this.$refs.PaginationBox.Reload(this.where);
            }
        },
    },
    mounted() {

    },
    methods: {


        SearchTopic() {
            this.$router.push({
                path: `/Client/TopicSearch`, query: {
                    KeyWord: this.KeyWord,
                }
            });
        },

        TopicClick(item) {
            this.$router.push({
                path: `/Client/TopicDetail`, query: {
                    TopicId: item.Id,

                }
            });
        },

    }


}
</script>

<style lang="scss" scoped>
.Topstory-mainColumn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
    margin-bottom: 0;
    margin-right: 10px;
    width: 994px;
}



.Topstory-tabs {
    border-bottom: 1px solid #f8f8fa;
}

.TopstoryTabs {
    height: 58px;
    display: flex;
}

.TopstoryTabs-link {
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 16px;
    margin: 0 22px;
}

.TopstoryTabs-link.is-active {
    font-weight: 500;
    color: #1772f6;
}

.TopstoryItem {
    border-radius: 0;
    outline: none;
    overflow: visible;
    overflow: initial;
    padding: 16px 20px;
    position: relative;
    border-bottom: 1px solid #f8f8fa;
    padding-bottom: 30px;
}

.ContentItem-title {
    margin-bottom: -4px;
    margin-top: -4px;
    word-break: break-word;
    color: #191b1f;
    line-height: 1.6;
    font-size: 18px;
    font-synthesis: style;
    font-weight: 600;
}

.AuthorInfo {
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    justify-content: space-between;
    max-width: 654px;
    position: relative;
}

.AuthorInfo-avatar {
    box-sizing: border-box;
    margin: 0px;
    min-width: 0px;
    max-width: 100%;
    background-color: rgb(255, 255, 255);
    width: 24px;
    height: 24px;
    border-radius: 2px;
}

.AuthorInfo-name {
    font-synthesis: style;
    font-weight: 600;
}

.AuthorInfo-badgeText {
    color: #535861;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ContentItem-time {
    color: #8491a5;
    font-size: 14px;
    margin-top: 10px;
}

.content-cut {

    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;

    line-height: 1.2em;
}

.RightSideBar {
    width: 296px;
    -webkit-align-self: normal;
    -ms-flex-item-align: normal;
    align-self: normal;
}

.CreatorEntrance {
    height: 52px;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
}
</style>
